<!-- 实时报名监测 -->
<template>
  <ScreenAdapter>
    <!--  百度地图背景  -->
    <bMap v-if="pointArr.length === 0"></bMap>
    <bMap v-else :centerPoint="centerPoint" :point="pointArr" :polygon="polygon" :polygonColor="polygonColor" :clearOverlays="clearOverlays" @onMarkerClick="onMarkerClick"></bMap>    <!--  顶部标题栏  -->
    <div class="container_top-ssbm">
      <div class="topleft">
        <p @click="$router.push('/xuequfenxi')">学区分析</p>
        <p @click="$router.push('/yubaom')">预报名分析</p>
        <p class="active">实时报名</p>
        <p @click="$router.push('/xueweitiaoji')">学位调剂</p>
      </div>
      <p>{{ cityname }}.实时报名检测</p>
      <div class="topright">
        <div>
          统计时间：
          <el-select style="width: 132px; z-index: 9; position: relative" v-model="localYear" @change="onSelectChange">
            <el-option
              v-for="item in yearList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              class="selectbox"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <!--  左侧图表  -->
    <div class="sidebox-ssbm left">
      <div class="maintitle"><p>学生占比</p></div>
      <div class="mainbox" style="height:255px;">
        <div class="mainbox_content">
          <div class="flexbetween">
            <div class="yzjzbox" style="width:50%;position: relative; ">
              <v-chart :option="chartpie1" style="width:100%; height:175px"></v-chart>
              <div class="yzjzcircle"></div>
              <div class="flexbetween" style="width:90%;margin:0 auto;">
                <div :class="'pielegend pielegend1'+index" v-for="(item,index) in pie1data" :key="index">
                  <p>{{ item.name }}:人</p>
                  <p class="normaltxt"><span class="keyblue">{{ item.value }}</span></p>
                  <p class="normaltxt"><span>{{ item.percent }}%</span></p>
                </div>
              </div>
            </div>

            <div style="flex:1;border-left:1px solid rgba(255,255,255,0.24)">
              <v-chart :option="chartpie2" style="width:100%; height:175px"></v-chart>
              <div class="flexbetween" style="width:90%;margin:0 auto;">
                <div :class="'pielegend pielegend2'+index" v-for="(item,index) in pie2data" :key="index">
                  <p>{{ item.name }}:人</p>
                  <p class="normaltxt"><span class="keyblue">{{ item.value }}</span></p>
                  <p class="normaltxt"><span>{{ item.percent }}%</span></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="maintitle"><p>报名人数</p></div>
      <div class="mainbox" style="height:255px">
        <div class="mainbox_content">
          <div class="flexbox" style="justify-content: space-around">
            <p class="normaltxt">线上报名:<span class="keyblue">{{ baomingdata.online }}</span>人 </p>
            <p class="normaltxt">线下报名:<span class="keyblue">{{ baomingdata.offline }}</span>人 </p>
          </div>
          <div class="subtitle">
            <p>实时报名人数趋势</p>
          </div>
          <v-chart :option="chartLine" style="width:100%; height:175px"></v-chart>
        </div>
      </div>
      <div class="maintitle"><p>乡镇街道排名</p></div>
      <div class="mainbox" style="height:255px">
        <div class="mainbox_content">
          <div class="wrap-table head">
            <table style="border-spacing: 0">
              <colgroup>
                <col style="width: 15%"/>
                <col style="width: 30%"/>
                <col style="width: 55%"/>
              </colgroup>
              <thead>
              <tr>
                <th>排名</th>
                <th>乡镇街道</th>
                <th style="text-align: left">报名人数</th>
              </tr>
              </thead>
            </table>
          </div>
          <div class="wrap-table body">
            <table style="border-spacing: 0">
              <colgroup>
                <col style="width: 15%"/>
                <col style="width: 30%"/>
                <col style="width: 55%"/>
              </colgroup>
              <tr v-for="(item,index) in top10data" :key="index">
                <td><p :class="index<1?'sortN'+index : ''">{{ (index + 1) }}</p></td>
                <td>
                  <div>{{ item.city }}</div>
                </td>
                <td>
                  <div style="display: flex">
                    <div class="progressbox1">
                      <div :class="index===0?'progresscurbox progress0':'progresscurbox'"
                           :style="{'width':item.percent+'%'}"></div>
                    </div>
                    <div style="color: #fff;margin-right:10px;">{{ item.value }}</div>
                  </div>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!--  中部图表  -->
    <div class="midbox-ssbm">
      <div class="flexbetween midtopbox">
        <div class="midtjbox1  midtj0">
          <div class="flexbetween">
            <div class="midtopcontent">
              <p class="normaltxt"><span class="lightblue2" style="padding-left:0">{{ middata.yibaoming }}</span></p>
              <p class="normaltxt">当前已报名 (人)</p>
            </div>
            <div class="midtopcontent">
              <p class="normaltxt"><span class="keygreen" style="padding-left:0">{{ middata.yibaoming }}</span></p>
              <p class="normaltxt">当前录取 (人)</p>
            </div>
            <div class="midtopcontent" style="cursor: pointer" @click="shengyuview=!shengyuview">
              <p class="normaltxt"><span class="keyyellow2 keyarrow" style="padding-left:0">{{
                  middata.yibaoming
                }}</span></p>
              <p class="normaltxt">剩余学位 (个)</p>
            </div>
          </div>
        </div>
        <div class="midtjbox1">
          <div class="flexbox progressbox1">
            <div v-for="(item,index) in middata.xiaoxuedata" :key="index"
                 :class="'progresscurbox progresscurbox'+index" :style="{'width':item.percent+'%'}"></div>
          </div>
          <div class="flexlist">
            <div :class="'tjlist tjlist'+index" v-for="(item,index) in middata.xiaoxuedata" :key="index">
              <p class="normaltxt">小学{{ item.name }}:<span
                class="keyblue">{{ item.value }}</span><b>{{ item.unit }}</b></p>
            </div>
          </div>
        </div>
        <div class="midtjbox1" style="border-right:0">
          <div class="flexbox progressbox1">
            <div v-for="(item,index) in middata.zhongxuedata" :key="index"
                 :class="'progresscurbox progresscurbox'+index" :style="{'width':item.percent+'%'}"></div>
          </div>
          <div class="flexlist">
            <div :class="'tjlist tjlist'+index" v-for="(item,index) in middata.zhongxuedata" :key="index">
              <p class="normaltxt">中学{{ item.name }}:<span
                class="keyblue">{{ item.value }}</span><b>{{ item.unit }}</b></p>
            </div>
          </div>
        </div>

      </div>
      <div class="flexbetween" style="margin-top:10px;">
        <div class="mapname"><p>{{ mapname }}</p></div>
<!--        <div class="mapcontrolbox">-->
<!--          <p :class="mapcontrol===1?'green active':'green'" @click="mapcontrol=1">小学</p>-->
<!--          <p :class="mapcontrol===2?'yellow active':'yellow'" @click="mapcontrol=2">初中</p>-->
<!--        </div>-->
        <div>
<!--          <el-select style="width: 132px; z-index: 9; position: relative" v-model="localcity"-->
<!--                     :popper-append-to-body="false">-->
<!--            <el-option-->
<!--              v-for="item in cityList"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value"-->
<!--              class="selectbox"-->
<!--            >-->
<!--            </el-option>-->
<!--          </el-select>-->
          <el-input v-model="searchtxt" placeholder="请输入关键字 学区/学校" style="width:300px;"></el-input>
          <el-button class="btn" @click="renovateData">搜索</el-button>
        </div>
      </div>
      <div v-if="shengyuview" class="shengyubox">
        <div class="shengyutop">
          <div class="maintitle"><p>剩余学位明细</p></div>
        </div>
        <div class="shengyucontent">
          <div class="shengyubody">
            <div class="flexbetween">
              <div :class="sorttype===0?'xuexiaolistbox active':'xuexiaolistbox'"
                   @click="sorttype=0">
                <p> 正序 </p>
              </div>
              <div :class="sorttype===1?'xuexiaolistbox active':'xuexiaolistbox'"
                   @click="sorttype=1">
                <p> 倒序 </p>
              </div>
            </div>
            <div class="wrap-table head" style="margin-top:20px;">
              <table style="border-spacing: 0">
                <colgroup>
                  <col style="width: 15%"/>
                  <col style="width: 45%"/>
                  <col style="width: 40%"/>
                </colgroup>
                <thead>
                <tr>
                  <th>序号</th>
                  <th>学校名称</th>
                  <th>剩余学位</th>
                </tr>
                </thead>
              </table>
            </div>
            <div class="wrap-table body" style="max-height: 400px; overflow: scroll">
              <table style="border-spacing: 0">
                <colgroup>
                  <col style="width: 15%"/>
                  <col style="width: 45%"/>
                  <col style="width: 40%"/>
                </colgroup>
                <tr v-for="(item,index) in shengyuinfodata" :key="index" style="cursor: pointer">
                  <td><p :class="index<1?'sortN'+index : ''">{{ (index + 1) }}</p>
                  <td><p>{{ item.name }}</p>
                  </td>
                  <td>
                    {{ item.value }}
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--  右侧图表  -->
    <div class="sidebox-ssbm right">
      <div class="maintitle"><p>报名倒计时</p></div>
      <div class="mainbox" style="height: 55px;">
        <div class="mainbox_content">
          <div class="tmpbox"></div>
        </div>
      </div>
      <div class="rightbox">
        <div class="rightbox_content">
          <div class="poptitlebox">
            <div class="flexbox" style="padding-top:20px;">
              <p class="poptype">{{ schooldata.type }}</p>
              <p class="poptitle">{{ schooldata.name }}</p>
              <p class="topopinfo" style="cursor: pointer" @click="$router.push({path: '/xuexiao', query: {schoolId: schooldata.schoolId}})">详情</p>
            </div>
            <p>学校地址：{{ schooldata.address }}</p>
          </div>
          <div class="flexwrap">
            <div :class="'listbox listbox2'+index" v-for="(item,index) in schooldata.baomingdata" :key="index">
              <p class="listval">{{ item.value }}</p>
              <p class="listname">{{ item.name }}</p>
            </div>
          </div>
          <div class="wrap-table head" style="margin-top:20px;">
            <table style="border-spacing: 0">
              <colgroup>
                <col style="width: 10%"/>
                <col style="width: 10%"/>
                <col style="width: 20%"/>
                <col style="width: 10%"/>
                <col style="width: 10%"/>
                <col style="width: 40%"/>
              </colgroup>
              <thead>
              <tr>
                <th>排名</th>
                <th>类型</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>地址</th>
              </tr>
              </thead>
            </table>
          </div>
          <div class="wrap-table body" style="height: 470px; overflow: auto">
            <table style="border-spacing: 0">
              <colgroup>
                <col style="width: 10%"/>
                <col style="width: 10%"/>
                <col style="width: 20%"/>
                <col style="width: 10%"/>
                <col style="width: 10%"/>
                <col style="width: 40%"/>
              </colgroup>
              <tr v-for="(item,index) in schooldata.xuexiaodata" :key="index" style="cursor: pointer"
                  @click="$router.push({path: '/xuesheng', query: {idcard: item.idcard, year: localYear}})">
                <td><p :class="index<1?'sortN'+index : ''">{{ (index + 1) }}</p>
                <td><p>{{ item.type }}类</p>
                </td>
                <td>
                  <div>{{ item.name }}</div>
                </td>
                <td>
                  {{ item.sex }}
                </td>
                <td>{{ item.age }}</td>
                <td><p>{{ item.address }}</p></td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!--  底部操作  -->
    <div class="bottom-ssbm">
      <!--      <div class="mapbigbox">-->
      <!--        <div>-->
      <!--          <p>+</p>-->
      <!--          <p>-</p>-->
      <!--        </div>-->
      <!--      </div>-->
      <div class="schoolcontrolbox school0" v-if="schoolcontrol===null">
        <p @click="onBottomClick(2)">只看小学</p>
        <p class="active">全部学校</p>
        <p @click="onBottomClick(3)">只看初中</p>
      </div>
      <div class="schoolcontrolbox school1" v-if="schoolcontrol===2">
        <p class="active">只看小学</p>
        <p @click="onBottomClick(null)">全部学校</p>
        <p @click="onBottomClick(3)">只看初中</p>
      </div>
      <div class="schoolcontrolbox school2" v-if="schoolcontrol===3">
        <p @click="onBottomClick(2)">只看小学</p>
        <p @click="onBottomClick(null)">全部学校</p>
        <p class="active">只看初中</p>
      </div>
    </div>
  </ScreenAdapter>
</template>

<script>
import autoPage from '../utils/autoPage'
import VChart from 'vue-echarts'
import rollNum from '../components/rollNum'
import bMap from '../components/bMap'
import ScreenAdapter from '../components/ScreenAdapter'

export default {
  name: 'yubaom',
  components: {
    VChart,
    rollNum,
    bMap,
    ScreenAdapter
  },
  extends: autoPage,
  data () {
    return {
      // 是否清除所有覆盖物
      clearOverlays: {
        flag: false
      },
      // 是否存在下一页数据
      hasNextPage: true,
      // 实时页码
      pageNum: 0,
      // 颜色索引
      colorIndex: -1,
      // 覆盖物颜色
      polygonColor: '',
      // 地图显示标志
      showMap: false,
      // 地图中心坐标
      centerPoint: {},
      // 学校地图坐标
      pointArr: [],
      // 学校范围坐标组
      polygon: [],
      cityname: '东阳市',
      localYear: new Date().getFullYear(),
      yearList: [
        {label: '2022年', value: '2022'},
        {label: '2021年', value: '2021'},
        {label: '2020年', value: '2020'},
        {label: '2019年', value: '2019'},
        {label: '2018年', value: '2018'}
      ],
      pie1data: [// 男女学生占比
        {name: '男', value: 5000, percent: 56},
        {name: '女', value: 4000, percent: 44}
      ],
      pie2data: [// 小学中学学生占比
        {name: '小学', value: 5000, percent: 56},
        {name: '中学', value: 4000, percent: 44}
      ],
      baomingdata: {
        offline: 234,
        online: 1234
      },
      realdata: [
        {
          name: '报名人数',
          value: [
            {name: '8', value: 123},
            {name: '9', value: 1025},
            {name: '11', value: 3123},
            {name: '12', value: 1523},
            {name: '13', value: 823},
            {name: '14', value: 623},
            {name: '15', value: 523}
          ]
        }
      ],
      top10data: [ // 区县预报名排行
        {city: '某某街道一', value: 34590, percent: 98},
        {city: '某某街道二', value: 31590, percent: 95},
        {city: '某某街道三', value: 30590, percent: 92},
        {city: '某某街道四', value: 29590, percent: 90}
      ],
      shengyuview: false,
      sorttype: 0, // 0正序1倒序
      middata: {
        yibaoming: 10900, // 当前已报名
        dqluqu: 1356, // 当前录取
        shengyuxuewei: 1000, // 剩余学位
        xiaoxuedata: [ // 小学
          {name: '报名人数', value: 1456, percent: 65, unit: '人'},
          {name: '学位数', value: 456, percent: 35, unit: '个'}
        ],
        zhongxuedata: [ // 小学
          {name: '报名人数', value: 1456, percent: 65, unit: '人'},
          {name: '学位数', value: 456, percent: 35, unit: '个'}
        ]
      },
      shengyuinfodata: [ // 剩余学位明细
        {name: '东阳中心小学', value: 1222},
        {name: '东阳中心小学', value: 1222},
        {name: '东阳中心小学', value: 1222},
        {name: '东阳中心小学', value: 1222},
        {name: '东阳中心小学', value: 1222},
        {name: '东阳中心小学', value: 1222},
        {name: '东阳中心小学', value: 1222},
        {name: '东阳中心小学', value: 1222},
        {name: '东阳中心小学', value: 1222},
        {name: '东阳中心小学', value: 1222},
        {name: '东阳中心小学', value: 1222},
        {name: '东阳中心小学', value: 1222}
      ],
      searchtxt: '', // 地图搜索
      localcity: '', // 选择的乡镇街道
      cityList: [ // 乡镇街道列表
        {label: '吴宁街道', value: '330783001'},
        {label: '南市街道', value: '330783003'},
        {label: '白云街道', value: '330783004'},
        {label: '江北街道', value: '330783005'},
        {label: '城东街道', value: '330783006'},
        {label: '六石街道', value: '330783007'},
        {label: '巍山镇', value: '330783106'},
        {label: '虎鹿镇', value: '330783107'},
        {label: '歌山镇', value: '330783108'},
        {label: '佐村镇', value: '330783109'},
        {label: '东阳江镇', value: '330783110'},
        {label: '湖溪镇', value: '330783112'},
        {label: '马宅镇', value: '330783114'},
        {label: '千祥镇', value: '330783116'},
        {label: '南马镇', value: '330783118'},
        {label: '画水镇', value: '330783122'},
        {label: '横店镇', value: '330783123'},
        {label: '三单乡', value: '330783201'}
      ],
      mapname: '东阳市',
      mappopview: false,
      mapcontrol: 0, // 地图筛选控制，0:全部，1：人数90%以下，2：90-100%，3为超过计划招生人数
      schoolcontrol: null, // 学校筛选控制，null：全部，1：小学，2：初中
      xuexiaotype: 0, // 学校类别
      schooldata: {
        type: '公办',
        name: '某某某某某学校',
        address: '某某省某某市某某区某某路123号',
        baomingdata: [
          {name: '已报名人数', value: 12000},
          {name: '剩余学位', value: 2269},
          {name: '计划招生', value: 14269},
          {name: '预报名人数', value: 23412}
        ],
        xuexiaodata: [
          {
            name: '上官飘飘',
            type: 'A',
            sex: '女',
            age: 14,
            address: '浙江省金华市东阳区吴宁街道中心路12号'
          },
          {
            name: '上官飘飘',
            type: 'A',
            sex: '女',
            age: 14,
            address: '浙江省金华市东阳区吴宁街道中心路12号'
          },
          {
            name: '上官飘飘',
            type: 'A',
            sex: '女',
            age: 14,
            address: '浙江省金华市东阳区吴宁街道中心路12号'
          },
          {
            name: '上官飘飘',
            type: 'A',
            sex: '女',
            age: 14,
            address: '浙江省金华市东阳区吴宁街道中心路12号'
          },
          {
            name: '上官飘飘',
            type: 'A',
            sex: '女',
            age: 14,
            address: '浙江省金华市东阳区吴宁街道中心路12号'
          },
          {
            name: '上官飘飘',
            type: 'A',
            sex: '女',
            age: 14,
            address: '浙江省金华市东阳区吴宁街道中心路12号'
          },
          {
            name: '上官飘飘',
            type: 'A',
            sex: '女',
            age: 14,
            address: '浙江省金华市东阳区吴宁街道中心路12号'
          },
          {
            name: '上官飘飘',
            type: 'A',
            sex: '女',
            age: 14,
            address: '浙江省金华市东阳区吴宁街道中心路12号'
          },
          {
            name: '上官飘飘',
            type: 'A',
            sex: '女',
            age: 14,
            address: '浙江省金华市东阳区吴宁街道中心路12号'
          },
          {
            name: '上官飘飘',
            type: 'A',
            sex: '女',
            age: 14,
            address: '浙江省金华市东阳区吴宁街道中心路12号'
          },
          {
            name: '上官飘飘',
            type: 'A',
            sex: '女',
            age: 14,
            address: '浙江省金华市东阳区吴宁街道中心路12号'
          }
        ]
      }

    }
  },
  computed: {
    chartpie1 () {
      let data = this.pie1data
      let color = ['rgba(7,124,220,1)', 'rgba(247,143,255,1)', '#46C88C', '#FFB936', '#F78FFF', '#6F8CFF']
      // let objData = this.array2obj(data, 'name')
      // let sum = 0
      // data.map(item => {
      //   sum += Number(item.value)
      // })
      // sum = parseFloat(sum).toFixed(2)
      return {
        title: {
          text: '{name|性别}',
          textAlign: 'center',
          left: '45%',
          top: '48%',
          textStyle: {
            rich: {
              name: {
                color: '#fff',
                fontSize: 14
              },
              value: {
                height: 20,
                color: '#53E2FF',
                fontSize: 16,
                fontFamily: 'DINPro-Medium'
              },
              unit: {
                fontSize: 14,
                color: 'rgba(255,255,255,0.72)'
              }
            }
          }
        },
        series: [{
          type: 'pie',
          center: ['47%', '51%'],
          radius: ['72%', '90%'],
          itemStyle: {
            color: params => color[params.dataIndex]
          },
          labelLine: {
            show: false
          },
          label: {
            show: false,
            position: 'center',
            fontSize: 14,
            lineHeight: 28,
            color: 'rgba(255,255,255,0.8)',
            formatter: params => {
              return `{per| ${params.percent}%}\n{name|${params.name}}`
            },
            rich: {
              name: {
                fontSize: 16,
                color: 'rgba(255,255,255,0.88)'
              },
              per: {
                fontSize: 20,
                color: '#fff',
                fontWeight: 'bold',
                fontFamily: 'DINPro-Medium'
              }
            }
          },
          z: 3,
          data: data.map(item => {
            return {
              ...item
              // emphasis: {
              //   label: {
              //     show: true
              //   }
              // }
            }
          })
        }]
      }
    },
    chartpie2 () {
      let data = this.pie2data
      return {
        title: {
          text: '{name|学校}',
          textAlign: 'center',
          left: '45%',
          top: '48%',
          textStyle: {
            rich: {
              name: {
                color: '#fff',
                fontSize: 14
              },
              value: {
                height: 20,
                color: '#53E2FF',
                fontSize: 16,
                fontFamily: 'DINPro-Medium'
              },
              unit: {
                fontSize: 14,
                color: 'rgba(255,255,255,0.72)'
              }
            }
          }
        },
        series: [
          {
            name: data[0].name,
            type: 'pie',
            clockWise: false,
            radius: ['75%', '85%'],
            center: ['50%', '50%'],
            itemStyle: {
              normal: {
                color: 'rgba(70,200,140,1)',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            hoverAnimation: false,
            data: [{
              value: data[0].percent,
              label: {
                formatter: '{value|' + data[0].percent + '}',
                position: 'center',
                padding: [5, 0, 0, 0],
                show: false,
                textStyle: {
                  fontSize: 16,
                  color: '#53E2FF', // 跟随其他颜色
                  rich: {
                    value: {
                      fontSize: '16',
                      fontWeight: 'bold',
                      padding: [0, 0, 10, 0]
                    }
                  }
                }

              }
            }, {
              value: 100 - data[0].percent,
              name: 'invisible',
              itemStyle: {
                normal: {
                  color: '#043c70'
                }

              }
            }]
          },
          {
            name: '',
            type: 'pie',
            clockWise: false,
            radius: ['70%', '90%'],
            center: ['50%', '50%'],
            itemStyle: {
              normal: {
                color: '#043c70',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            data: [100],
            z: 0
          },
          {
            name: data[1].name,
            type: 'pie',
            clockWise: false,
            radius: ['50%', '60%'],
            center: ['50%', '50%'],
            itemStyle: {
              normal: {
                color: 'rgba(255,185,54,1)',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            hoverAnimation: false,
            data: [{
              value: data[1].percent,
              label: {
                formatter: '{value|' + data[1].percent + '}',
                position: 'center',
                padding: [5, 0, 0, 0],
                show: false,
                textStyle: {
                  fontSize: 16,
                  color: '#53E2FF', // 跟随其他颜色
                  rich: {
                    value: {
                      fontSize: '16',
                      fontWeight: 'bold',
                      padding: [0, 0, 10, 0]
                    }
                  }
                }

              }
            }, {
              value: 100 - data[1].percent,
              name: 'invisible',
              itemStyle: {
                normal: {
                  color: '#043c70'
                }

              }
            }]
          },
          {
            name: '',
            type: 'pie',
            clockWise: false,
            radius: ['45%', '65%'],
            center: ['50%', '50%'],
            itemStyle: {
              normal: {
                color: '#043c70',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            data: [100],
            z: 0
          }
        ]
      }
    },
    chartLine () {
      let data = this.realdata
      let color = ['rgba(83,226,255', 'rgba(255,185,54', 'rgba(255, 160, 10, 1)']
      return {
        color: color,
        legend: {
          show: false,
          left: 'right',
          top: 10,
          itemGap: 25,
          icon: 'rect',
          itemWidth: 8,
          itemHeight: 8,
          padding: [0, 15, 0, 0],
          textStyle: {
            fontSize: 12,
            color: 'rgba(255,255,255,0.72)'
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(3,32,64,0.80)',
          borderColor: '#3D5267',
          textStyle: {
            fontSize: 12,
            color: '#fff',
            fontStyle: 'normal',
            fontWeight: 'normal'
          }
        },
        textStyle: {
          fontFamily: 'Microsoft YaHei',
          fontSize: 12,
          color: '#fff',
          fontStyle: 'normal',
          fontWeight: 'normal'
        },
        grid: [
          {
            left: '4%',
            right: '4%',
            top: '20%',
            bottom: '8%',
            containLabel: true
          }
        ],
        xAxis: {
          type: 'category',
          // name: '类型',
          // nameLocation: 'start',
          // nameGap: 8,
          // nameTextStyle: {
          //   color: 'rgba(255,255,255,0.72)',
          //   verticalAlign: '0',
          //   fontSize: 16,
          //   padding: [12, 0, -22, 0]
          // },
          axisTick: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#3D5267',
              width: 1,
              type: 'dashed'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 12,
              color: 'rgba(255,255,255,0.72)'
            }
          }
        },
        yAxis: [{
          type: 'value',
          name: '单位：人',
          nameTextStyle: {
            color: 'rgba(255,255,255,0.72)',
            fontSize: 12
          },
          splitNumber: 3,
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,0.16)',
              width: 1
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.16)',
              width: 1,
              type: 'dashed'
            }
          },
          axisLabel: {
            textStyle: {
              fontSize: 12,
              color: 'rgba(255,255,255,0.72)'
            }
          }
        }],
        series: data.map((item, index) => {
          return {
            name: item.name,
            type: 'line',
            data: item.value.map(itm => [itm.name, itm.value ? itm.value : '']),
            itemStyle: {
              color: color[index] + ',1)'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: color[index] + ',0.5)'
                  },
                  {
                    offset: 1,
                    color: color[index] + ', 0)'
                  }
                ],
                global: false
              }
            }
          }
        })
      }
    }
  },
  watch: {
    pointArr: {
      handler (newVal) {
        if (newVal.length > 0) {
          this.showMap = false
          this.$nextTick(() => {
            this.showMap = true
          })
        }
      },
      immediate: true,
      // 开启深度监听 deep
      deep: true
    },
    polygon: {
      handler (newVal, oldVal) {
        if (oldVal) {
          this.showMap = false
          this.$nextTick(() => {
            this.showMap = true
          })
        }
      },
      immediate: true,
      // 开启深度监听 deep
      deep: true
    }
  },
  methods: {
    // 获取颜色值
    getRandomColor () {
      const colorArr = ['#ECF9FF', '#FFB936', '#46C88C', '#09C8EB', '#92A7E5']
      if (this.colorIndex < (Number(colorArr.length) - 1)) {
        this.colorIndex++
      }
      return colorArr[this.colorIndex]
      // return '#' + ('00000' + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6)
    },
    // 判断数组array1中是否含有数组array2
    arrayHasElement (array1, array2) {
      for (const index1 in array1) {
        if (array1[index1].length === array2.length) {
          for (const index2 in array1[index1]) {
            if (array1[index1][index2].join() !== array2[index2].join()) {
              break
            }
            // 到最后一个元素都没有出现不相等，就说明这两个数组相等
            if (Number(index2) === (Number(array1[index1].length) - 1)) {
              return {
                identical: true,
                index: index1
              }
            }
          }
        }
      }
      return {
        identical: false,
        index: -1
      }
    },
    // 地图标点点击的回调
    onMarkerClick (pointObj) {
      this.getData6(pointObj.id)
      this.$axios({
        method: 'post',
        url: '/doc/api/EduAnalysisXq0004',
        data: {
          year: '2021',
          schoolId: pointObj.id
        }
      }).then((res) => {
        const result = res.result
        if (result.asMapRegion) {
          let tempObj = {
            id: pointObj.id,
            arr: []
          }
          // 转换坐标（高德转百度）
          for (const item of result.asMapRegion) {
            tempObj.arr.push(this.transform(item[0], item[1]))
          }
          // 添加到覆盖物数组内
          this.polygon = [tempObj]
          // 设置地图中心坐标
          this.centerPoint = {...pointObj}
        }
      })
    },
    // 高德转百度坐标
    transform (lng, lat) {
      let val = 3.14159265358979324 * 3000.0 / 180.0
      const z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * val)
      const theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * val)
      const bLng = z * Math.cos(theta) + 0.0065
      const bLat = z * Math.sin(theta) + 0.006
      return [bLng, bLat]
    },
    // 获取学生占比数据
    getData1 () {
      this.$axios({
        method: 'post',
        url: '/doc/api/EduAnalysisXq0015',
        data: {
          year: this.localYear,
          areaCode: '330783',
          schoolCategory: this.schoolcontrol === null ? '' : this.schoolcontrol
        }
      }).then((res) => {
        const result = res.result
        const total = Number(result.mcount) + Number(result.wcount)
        this.pie1data = [
          {name: '男', value: result.mcount, percent: ((Number(result.mcount) / total) * 100).toFixed(2)},
          {name: '女', value: result.wcount, percent: ((Number(result.wcount) / total) * 100).toFixed(2)}
        ]
        const total2 = Number(result.schoolCategoryXx) + Number(result.schoolCategoryZx)
        this.pie2data = [
          {
            name: '小学',
            value: result.schoolCategoryXx,
            percent: ((Number(result.schoolCategoryXx) / total2) * 100).toFixed(2)
          },
          {
            name: '中学',
            value: result.schoolCategoryZx,
            percent: ((Number(result.schoolCategoryZx) / total2) * 100).toFixed(2)
          }
        ]
      })
    },
    // 获取报名人数数据
    getData2 () {
      this.$axios({
        method: 'post',
        url: '/doc/api/EduAnalysisXq0020',
        data: {
          year: this.localYear,
          areaCode: '330783',
          schoolCategory: this.schoolcontrol === null ? '' : this.schoolcontrol
        }
      }).then((res) => {
        const result = res.result
        this.baomingdata = {
          offline: result.xxbm,
          online: result.xsbm
        }
        const tempArr = []
        for (const item of result.bmqsList) {
          tempArr.push({
            name: item.xzhou,
            value: item.yzhou
          })
        }
        this.realdata[0].value = tempArr
      })
    },
    // 获取乡镇街道排名数据
    getData3 () {
      this.$axios({
        method: 'post',
        url: '/doc/api/EduAnalysisXq0021',
        data: {
          year: this.localYear,
          areaCode: '330783',
          schoolCategory: this.schoolcontrol === null ? '' : this.schoolcontrol
        }
      }).then((res) => {
        const result = res.result
        const tempArr = []
        for (const index in result) {
          if (Number(index) < 6) {
            tempArr.push({
              city: result[index].streetName,
              value: result[index].bmrs,
              percent: 90
            })
          }
        }
        this.top10data = tempArr
      })
    },
    // 获取学校/学位地图信息
    getData4 () {
      this.$axios({
        method: 'post',
        url: '/doc/api/EduAnalysisXq0003',
        data: {
          year: this.localYear,
          areaCode: '330783',
          schoolCategory: this.schoolcontrol === null ? '' : this.schoolcontrol,
          street: this.localcity,
          schoolName: this.searchtxt,
          pageNum: this.pageNum++,
          pageSize: 10
        }
      }).then((res) => {
        for (const item of res.result.list) {
          // 添加学校坐标
          this.pointArr.push({
            id: item.orgId,
            name: item.schoolName,
            imgColor: null,
            point: this.transform(Number(item.longitude), Number(item.latitude))
          })
        }
        this.hasNextPage = res.result.hasNextPage
        // 地图中心坐标
        this.centerPoint = this.pointArr[0]
        // this.centerPoint = {
        //   name: '东阳市人民政府',
        //   point: [120.248159, 29.296355]
        // }
      }).catch((err) => {
        console.log('err = ', err)
        this.hasNextPage = false
      })
    },
    // 获取汇总数据
    getData5 () {
      this.$axios({
        method: 'post',
        url: '/doc/api/EduAnalysisXq0016',
        data: {
          year: this.localYear,
          areaCode: '330783',
          schoolCategory: this.schoolcontrol === null ? '' : this.schoolcontrol
        }
      }).then((res) => {
        const result = res.result
        this.middata = {
          yibaoming: result.ybm,
          dqluqu: result.ylq,
          shengyuxuewei: result.syxw,
          xiaoxuedata: [
            {name: '报名人数', value: result.xxbmrs, percent: 65, unit: '人'},
            {name: '学位数', value: result.xxxws, percent: 35, unit: '个'}
          ],
          zhongxuedata: [
            {name: '报名人数', value: result.zxbmrs, percent: 65, unit: '人'},
            {name: '学位数', value: result.zxxws, percent: 35, unit: '个'}
          ]
        }
      })
    },
    // 获取学校报名详情数据
    getData6 (schoolId) {
      this.$axios({
        method: 'post',
        url: '/doc/api/EduAnalysisXq0022',
        data: {
          year: this.localYear,
          areaCode: '330783',
          pageNum: '0',
          pageSize: '20',
          schoolId: schoolId
        }
      }).then((res) => {
        const result = res.result
        const tempArr = []
        for (const item of result.bmmxList) {
          tempArr.push({
            name: item.fullName,
            type: item.configName,
            sex: item.sex === '1' ? '男' : '女',
            age: item.nl,
            address: item.address,
            idcard: item.idcard
          })
        }
        this.schooldata = {
          schoolId: schoolId,
          type: result.schoolNature === '0' ? '公办' : '民办',
          name: result.schoolName,
          address: result.addressName,
          baomingdata: [
            {name: '已报名人数', value: result.ybm},
            {name: '剩余学位', value: result.syxw},
            {name: '计划招生', value: result.jhzsrs},
            {name: '预报名人数', value: result.ybmrs}
          ],
          xuexiaodata: tempArr
        }
      })
    },
    // 获取学生详情数据
    getData7 (schoolId) {
      this.$axios({
        method: 'post',
        url: '/doc/api/EduAnalysisXq0023',
        data: {
          year: this.localYear,
          schoolId: schoolId
        }
      }).then((res) => {
        this.$router.push({path: '/xuexiao', query: res.result})
      })
    },
    // 统计时间选择的回调
    onSelectChange () {
      this.getData1()
      this.getData2()
      this.getData3()
      this.getData5()
    },
    // 页面底部按钮点击的回调
    onBottomClick (schoolCategory) {
      this.schoolcontrol = schoolCategory
      this.pointArr = []
      this.polygon = []
      this.colorIndex = -1
      this.getData2()
      this.renovateData()
    },
    array2obj (array, key) {
      var resObj = {}
      for (var i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i]
      }
      return resObj
    },
    compare (key) {
      return function (value1, value2) {
        var val1 = value1[key]
        var val2 = value2[key]
        return val2 - val1
      }
    },
    // 渐进加载坐标数据
    renovateData () {
      // 初始化地图标点数据
      this.clearOverlays = {
        flag: true
      }
      this.pointArr = []
      this.hasNextPage = true
      this.pageNum = 0
      const interval = window.setInterval(() => {
        this.hasNextPage ? this.getData4() : window.clearInterval(interval)
      }, 1000)
    },
    // 年份列表初始化
    initYearList () {
      const tempArr = []
      let year = this.localYear
      let i = 5
      do {
        tempArr.push({
          label: year + '年', value: year
        })
        year = Number(year) - 1
        i--
      } while (i > 0)
      this.yearList = tempArr
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initYearList()
      this.getData1()
      this.getData2()
      this.getData3()
      this.renovateData()
      this.getData5()
    })
  },
  created () {
  }
}
</script>

<style scoped lang="less">
.btn {
  background-color: #0D2246;
  color: #49C5E3;
  border-color: #0A58A0;
}

.bottom-ssbm {
  flex: 1;
  width: 940px;
  margin: 0 24px;
  position: absolute;
  left: 475px;
  bottom: 10px;
  z-index: 2;

  .mapbigbox {
    width: 1500px;
    height: 32px;
    position: absolute;
    left: 0;
    bottom: 80px;
    display: flex;
    justify-content: center;
    align-items: center;

    div {
      width: 100px;
      background: #0D2246;
      border: 1px solid rgba(7, 124, 220, 1);
      border-radius: 16px;
      display: flex;
      justify-content: space-between;
      cursor: pointer;

      &:hover {
        border: 1px solid #53E2FF;
      }

      p {
        width: 32px;
        height: 32px;
        line-height: 27px;
        margin-left: 12px;
        margin-right: 12px;
        text-align: center;
        color: rgba(7, 124, 220, 1);
        font-size: 32px;
        font-weight: bold;
        cursor: pointer;

        &:hover {
          color: #53E2FF
        }
      }
    }
  }

  .schoolcontrolbox {
    width: 100%;
    height: 40px;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    p {
      width: 158px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 16px;
      color: #53E2FF;
      letter-spacing: 0.96px;
      cursor: pointer;

      &.active {
        font-size: 16px;
        background-image: linear-gradient(to bottom, #fff, #B6EAFF);
        -webkit-background-clip: text;
        color: transparent;
        letter-spacing: 0.96px;
        font-weight: bold;
      }
    }

    &.school0 {
      background: url(../assets/img/page/school0.svg) no-repeat center bottom;
    }

    &.school1 {
      background: url(../assets/img/page/school1.svg) no-repeat center bottom;
    }

    &.school2 {
      background: url(../assets/img/page/school2.svg) no-repeat center bottom;
    }

  }

  .mapcontrolbox {
    display: flex;

    p {
      line-height: 36px;
      font-size: 14px;
      color: #FFFFFF;
      letter-spacing: 0.84px;
      cursor: pointer;
      margin-right: 15px;

      &.blue {
        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background: rgba(14, 45, 80, 0.5);
          border: 1px solid rgba(52, 178, 255, 1);
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

        &.active {
          &:before {
            content: '✔';
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(14, 45, 80, 0.5);
            border: 1px solid rgba(52, 178, 255, 1);
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            color: rgba(52, 178, 255, 1)
          }
        }
      }

      &.green {
        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background: rgba(2, 63, 34, 0.5);
          border: 1px solid rgba(0, 255, 61, 1);
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

        &.active {
          &:before {
            content: '✔';
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(2, 63, 34, 0.5);
            border: 1px solid rgba(0, 255, 61, 1);
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            color: rgba(0, 255, 61, 1)
          }
        }
      }

      &.lightblue {
        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background: rgba(0, 255, 243, 0.24);
          border: 1px solid #00FFF3;
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

        &.active {
          &:before {
            content: '✔';
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(0, 255, 243, 0.24);
            border: 1px solid #00FFF3;
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            color: #00FFF3
          }
        }
      }

      &.yellow {
        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background: rgba(63, 46, 32, 0.5);
          border: 1px solid rgba(255, 185, 54, 1);
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

        &.active {
          &:before {
            content: '✔';
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(63, 46, 32, 0.5);
            border: 1px solid rgba(255, 185, 54, 1);
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            color: rgba(255, 185, 54, 1)
          }
        }
      }

      &.red {
        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background: rgba(67, 0, 0, 0.5);
          border: 1px solid rgba(255, 0, 0, 1);
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

        &.active {
          &:before {
            content: '✔';
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(67, 0, 0, 0.5);
            border: 1px solid rgba(255, 0, 0, 1);
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            color: rgba(255, 0, 0, 1)
          }
        }
      }
    }
  }

  .mapname {
    background: url("../assets/img/page/mapdot.svg") no-repeat left center;
    padding-left: 40px;

    p {
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 1.2px;
      background-image: linear-gradient(to bottom, #fff, #B6EAFF);
      -webkit-background-clip: text;
      color: transparent;
    }

  }

  .midtopbox {
    width: 100%;
    height: 104px;
    background-image: linear-gradient(180deg, rgba(7, 124, 220, 0.00) 0%, rgba(7, 124, 220, 0.24) 100%);

    .midtopcontent {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
}

.sidebox-ssbm {
  width: 450px;
  height: 960px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 2;
}

.left {
  position: absolute;
  top: 104px;
  left: 24px;
}

.right {
  position: absolute;
  top: 104px;
  right: 24px;
}

.midbox-ssbm {
  flex: 1;
  margin: 0 24px;
  width: 920px;
  position: absolute;
  left: 475px;
  top: 110px;
  z-index: 2;

  .mapcontrolbox {
    display: flex;

    p {
      line-height: 36px;
      font-size: 14px;
      color: #FFFFFF;
      letter-spacing: 0.84px;
      cursor: pointer;
      margin-right: 15px;

      &.blue {
        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background: rgba(14, 45, 80, 0.5);
          border: 1px solid rgba(52, 178, 255, 1);
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

        &.active {
          &:before {
            content: '✔';
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(14, 45, 80, 0.5);
            border: 1px solid rgba(52, 178, 255, 1);
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            color: rgba(52, 178, 255, 1)
          }
        }
      }

      &.green {
        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background: rgba(2, 63, 34, 0.5);
          border: 1px solid rgba(0, 255, 61, 1);
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

        &.active {
          &:before {
            content: '✔';
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(2, 63, 34, 0.5);
            border: 1px solid rgba(0, 255, 61, 1);
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            color: rgba(0, 255, 61, 1)
          }
        }
      }

      &.lightblue {
        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background: rgba(0, 255, 243, 0.24);
          border: 1px solid #00FFF3;
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

        &.active {
          &:before {
            content: '✔';
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(0, 255, 243, 0.24);
            border: 1px solid #00FFF3;
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            color: #00FFF3
          }
        }
      }

      &.yellow {
        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background: rgba(63, 46, 32, 0.5);
          border: 1px solid rgba(255, 185, 54, 1);
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

        &.active {
          &:before {
            content: '✔';
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(63, 46, 32, 0.5);
            border: 1px solid rgba(255, 185, 54, 1);
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            color: rgba(255, 185, 54, 1)
          }
        }
      }

      &.red {
        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background: rgba(67, 0, 0, 0.5);
          border: 1px solid rgba(255, 0, 0, 1);
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

        &.active {
          &:before {
            content: '✔';
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(67, 0, 0, 0.5);
            border: 1px solid rgba(255, 0, 0, 1);
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            color: rgba(255, 0, 0, 1)
          }
        }
      }
    }
  }

  .shengyubox {
    width: 450px;
    position: absolute;
    left: 30px;
    top: 80px;
    min-height: 300px;
    z-index: 23;

    &::after {
      content: '';
      width: 450px;
      height: 40px;
      display: block;
      background: url("../assets/img/page/popbg.svg") no-repeat left bottom;
    }

    .shengyutop {
      width: 450px;
      height: 40px;
      background: url("../assets/img/page/popbg.svg") no-repeat left top;
    }

    .shengyucontent {
      background: rgba(3, 46, 82, 0.80);

      .shengyubody {
        padding: 16px;
      }
    }
  }

  .mapbigbox {
    width: 100%;
    height: 32px;
    position: absolute;
    left: 0;
    bottom: 80px;
    display: flex;
    justify-content: center;
    align-items: center;

    div {
      width: 100px;
      background: #0D2246;
      border: 1px solid rgba(7, 124, 220, 1);
      border-radius: 16px;
      display: flex;
      justify-content: space-between;
      cursor: pointer;

      &:hover {
        border: 1px solid #53E2FF;
      }

      p {
        width: 32px;
        height: 32px;
        line-height: 27px;
        margin-left: 12px;
        margin-right: 12px;
        text-align: center;
        color: rgba(7, 124, 220, 1);
        font-size: 32px;
        font-weight: bold;
        cursor: pointer;

        &:hover {
          color: #53E2FF
        }
      }
    }
  }

  .schoolcontrolbox {
    width: 100%;
    height: 40px;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    p {
      width: 158px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 16px;
      color: #53E2FF;
      letter-spacing: 0.96px;
      cursor: pointer;

      &.active {
        font-size: 16px;
        background-image: linear-gradient(to bottom, #fff, #B6EAFF);
        -webkit-background-clip: text;
        color: transparent;
        letter-spacing: 0.96px;
        font-weight: bold;
      }
    }

    &.school0 {
      background: url(../assets/img/page/school0.svg) no-repeat left bottom;
    }

    &.school1 {
      background: url(../assets/img/page/school1.svg) no-repeat left bottom;
    }

    &.school2 {
      background: url(../assets/img/page/school2.svg) no-repeat left bottom;
    }

  }

  .mapname {
    background: url("../assets/img/page/mapdot.svg") no-repeat left center;
    padding-left: 40px;

    p {
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 1.2px;
      background-image: linear-gradient(to bottom, #fff, #B6EAFF);
      -webkit-background-clip: text;
      color: transparent;
    }
  }

  .midtopbox {
    width: 100%;
    height: 104px;
    background-image: linear-gradient(180deg, rgba(7, 124, 220, 0.00) 0%, rgba(7, 124, 220, 0.24) 100%);

    .midtjbox1 {
      border-right: 1px solid rgba(255, 255, 255, 0.24);
      padding: 0 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      &.midtj0 {
        width: 400px;
        background: url("../assets/img/page/pdot1.svg") no-repeat left center;
        padding-left: 75px;
      }

      .midtopcontent {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }

  }
}

.container {
  position: relative;
  background: #020317;
  width: 1920px;
  height: 1080px;
  transform-origin: top left;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  &_top-ssbm {
    width: 100%;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    height: 72px;
    background: url("../assets/img/page/titlebg.svg") no-repeat left top /100% 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .topleft {
      width: 516px;
      height: 40px;
      background: url("../assets/img/page/menu_3.svg") no-repeat left top /100% 100%;
      margin-left: 20px;
      display: flex;

      p {
        width: 138px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        color: #53E2FF;
        letter-spacing: 0.96px;
        text-align: center;
        cursor: pointer;

        &.active {
          color: #B4F2FF;
          font-weight: bold;
        }
      }
    }

    .topright {
      width: 516px;
      margin-right: 20px;
      display: flex;
      justify-content: end;
      align-items: center;
    }

    p {
      flex: 1;
      font-size: 32px;
      letter-spacing: 1.92px;
      text-align: center;
      line-height: 72px;
      font-weight: 700;
      background-image: linear-gradient(to bottom, #fff, #B6EAFF);
      -webkit-background-clip: text;
      color: transparent;
    }
  }

  &_body {
    height: 960px;
    padding: 24px;
    display: flex;
    position: relative;

    .infobox {
      width: 450px;
      position: absolute;
      top: 150px;
      right: 490px;
      z-index: 99999;

      &_top {
        width: 100%;
        height: 40px;
        background: url("../assets/img/page/popbg.svg") no-repeat left top;

        .infotitle {
          height: 40px;
          line-height: 40px;
          text-align: center;
          font-size: 16px;
          color: #53E2FF;
          letter-spacing: 0.96px;
          font-weight: bold;

          &:before {
            width: 32px;
            height: 32px;
            content: '';
            display: inline-block;
            vertical-align: middle;
            padding-right: 15px;
            background: url(../assets/img/page/titleleft.svg) no-repeat left center;
            animation: cubeshow1 3s linear infinite forwards;
          }

          &:after {
            width: 32px;
            height: 32px;
            content: '';
            display: inline-block;
            vertical-align: middle;
            padding-left: 15px;
            background: url(../assets/img/page/titleright.svg) no-repeat right center;
            animation: cubeshow2 3s linear infinite forwards;
          }
        }
      }

      &_body {
        min-height: 300px;
        background: rgba(3, 46, 82, 0.80);
        padding: 20px;
      }

      &_bottom {
        width: 100%;
        height: 40px;
        background: url("../assets/img/page/popbg.svg") no-repeat left bottom;
        margin-top: -1px;
      }
    }

    .bmap {
      width: 1500px;
      height: 100%;
      position: absolute;
      left: 210px;
      top: 0;
      z-index: 1;
    }
  }

  .tjlist {

    margin-top: 10px;

    &.tjlist0 {
      p {
        &:before {
          width: 8px;
          height: 8px;
          content: '';
          background: #077CDC;
          display: inline-block;
          margin-right: 10px;
          vertical-align: middle;
        }
      }

    }

    &.tjlist1 {
      p {
        &:before {
          width: 8px;
          height: 8px;
          content: '';
          background: #46C88C;
          display: inline-block;
          margin-right: 10px;
          vertical-align: middle;
        }
      }

    }
  }

  .progressbox1 {
    width: 190px;
    height: 8px;
    background: rgba(7, 124, 220, .12);
    margin-right: 10px;
    margin-top: 5px;
    display: flex;

    .progresscurbox0 {
      height: 8px;
      background: url("../assets/img/page/picon0.png") repeat-x left top;
    }

    .progresscurbox1 {
      height: 8px;
      background: url("../assets/img/page/picon1.png") repeat-x left top;
    }
  }

  .popbox {
    width: 450px;
    height: 768px;
    background: url("../assets/img/page/popbg.svg") no-repeat left top;
    position: absolute;
    top: 220px;
    left: 600px;
    z-index: 99;

    &_content {
      height: 730px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .popboxtitle {
        line-height: 32px;
        font-size: 14px;
        color: #fff;
        letter-spacing: 0.84px;
      }

      .tjbox1 {
        width: 200px;
        height: 146px;
        background: url("../assets/img/page/tjbg1.svg") no-repeat left top;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;

        p {
          font-size: 14px;
          color: #fff;

          &.tjval {
            height: 70px;
            width: 100%;
            text-align: center;
            background: url("../assets/img/page/dotbottom.svg") no-repeat center bottom;
          }

          span {
            font-size: 20px;
            //color: #53E2FF;
            letter-spacing: 1.2px;
          }
        }
      }

      .tjbox2 {
        width: 100%;
        height: 40px;
        background: rgba(7, 124, 220, .12);
        border-top: 1px solid rgba(7, 124, 220, 0.24);
        border-bottom: 1px solid rgba(7, 124, 220, 0.24);
        position: relative;
        display: flex;

        &:before {
          content: '';
          width: 24px;
          height: 1px;
          position: absolute;
          left: 0;
          top: -1px;
          background: #077CDC;
        }

        &:after {
          content: '';
          width: 24px;
          height: 1px;
          position: absolute;
          right: 0;
          bottom: -1px;
          background: #077CDC;
        }

        p {
          line-height: 40px;
          font-size: 14px;
          color: #fff;
          padding-left: 10px;

          span {
            font-size: 20px;
            font-weight: bold;
            color: #53E2FF;
            letter-spacing: 0.8px;
          }

          b {
            font-size: 14px;
            font-weight: normal;
            color: #53E2FF;
          }
        }
      }
    }
  }
}

.poptitlebox {
  height: 64px;
  background: url("../assets/img/page/popdot1.svg") no-repeat left center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-left: 75px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(7, 124, 220, 0.24);
  position: relative;

  &:before {
    content: '';
    width: 24px;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: -1px;
    background: #077CDC;
  }

  &:after {
    content: '';
    width: 24px;
    height: 1px;
    position: absolute;
    right: 0;
    bottom: -1px;
    background: #077CDC;
  }

  .poptype {
    width: 46px;
    height: 20px;
    line-height: 20px;
    background: #F07700;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    margin-right: 15px;
  }

  .poptitle {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1.2px;
    background-image: linear-gradient(to bottom, #fff, #B6EAFF);
    -webkit-background-clip: text;
    color: transparent;
  }

  .topopinfo {
    font-size: 16px;
    color: #53E2FF;
    letter-spacing: 0.96px;
    position: absolute;
    right: 0;
    background: url("../assets/img/page/toinfo.svg") no-repeat right center;
    padding-left: 15px;
    padding-right: 20px;
    text-align: right;
  }
}

.subtitle {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: column;

  p {
    line-height: 50px;
    font-weight: bold;
    font-size: 16px;
    color: #53E2FF;
    letter-spacing: 0.96px;

    &:before {
      width: 32px;
      height: 32px;
      content: '';
      display: inline-block;
      vertical-align: middle;
      padding-right: 15px;
      background: url(../assets/img/page/titleleft.svg) no-repeat left center;
      animation: cubeshow1 3s linear infinite forwards;
    }
  }
}

.maintitle {
  width: 100%;
  height: 32px;
  background: url("../assets/img/page/maintitle.svg") no-repeat left top;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  p {
    line-height: 32px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1.2px;
    background-image: linear-gradient(to bottom, #fff, #B6EAFF);
    -webkit-background-clip: text;
    color: transparent;

    &:before {
      width: 32px;
      height: 32px;
      content: '';
      display: inline-block;
      vertical-align: middle;
      padding-right: 15px;
      background: url(../assets/img/page/titleleft.svg) no-repeat left center;
      animation: cubeshow1 3s linear infinite forwards;
    }

    &:after {
      width: 32px;
      height: 32px;
      content: '';
      display: inline-block;
      vertical-align: middle;
      padding-left: 15px;
      background: url(../assets/img/page/titleright.svg) no-repeat right center;
      animation: cubeshow2 3s linear infinite forwards;
    }
  }
}

@keyframes cubeshow2 {
  0% {
    opacity: 0;
    transform: translateX(-10px);
    // transform: rotate(0) scale(0);
  }
  50% {
    opacity: 1;
    transform: translateX(0);
    // transform: rotate(0) scale(0.4);
  }
  100% {
    opacity: 0;
    transform: translateX(10px);
    //  transform: rotate(0) scale(1);
  }
}

@keyframes cubeshow1 {
  0% {
    opacity: 0;
    transform: translateX(10px);
    // transform: rotate(0) scale(0);
  }
  50% {
    opacity: 1;
    transform: translateX(0);
    // transform: rotate(0) scale(0.4);
  }
  100% {
    opacity: 0;
    transform: translateX(-10px);
    //  transform: rotate(0) scale(1);
  }
}

.rightbox {
  width: 100%;
  height: 840px;
  //background: url("../assets/img/page/rightbg.svg") no-repeat left top;
  position: relative;
  background-image: linear-gradient(to right, #113448, #091220);
  box-shadow: 0 0 7px 7px #113448;
  border-radius: 12px;

  &::after {
    content: '';
    width: 100%;
    height: 10px;
    background: url("../assets/img/page/rightbg.svg") no-repeat left bottom;
    position: absolute;
    left: 0;
    bottom: 0;
  }

  &_content {
    padding: 16px;
  }
}

.mainbox {
  width: 100%;
  height: 190px;
  //background-image: linear-gradient(180deg, rgba(7, 124, 220, 0.00) 0%, rgba(7, 124, 220, 0.24) 100%);
  background-image: linear-gradient(to right, #113448, #091220);
  box-shadow: 0 0 7px 7px #113448;
  border-radius: 12px;

  &_content {
    padding: 0 16px;
  }
}

.tmpbox {
  width: 434px;
  height: 55px;
  margin: -5px auto 0;
  background: url(../assets/img/tmp.png) no-repeat center;
}

.listbox {
  width: 50%;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;

  &.listbox0 {
    background: url("../assets/img/page/pdot1.svg") no-repeat left center;
  }

  &.listbox1 {
    background: url("../assets/img/page/pdot2.svg") no-repeat left center;
  }

  &.listbox2 {
    background: url("../assets/img/page/pdot3.svg") no-repeat left center;
  }

  &.listbox3 {
    background: url("../assets/img/page/pdot5.svg") no-repeat left center;
  }

  &.listbox20 {
    background: url("../assets/img/page/pdot1.svg") no-repeat left center;
  }

  &.listbox21 {
    background: url("../assets/img/page/pdot7.svg") no-repeat left center;
  }

  &.listbox22 {
    background: url("../assets/img/page/pdot5.svg") no-repeat left center;
  }

  &.listbox23 {
    background: url("../assets/img/page/pdot6.svg") no-repeat left center;
  }

  p {
    margin-left: 85px;

    &.listval {
      line-height: 42px;
      font-size: 24px;
      color: #53E2FF;
      letter-spacing: 1.44px;
      font-weight: bold;
    }

    &.listname {
      font-size: 14px;
      color: #FFFFFF;
      letter-spacing: 0.84px;
    }
  }

}

.pielegend {
  &.pielegend10 {
    p {
      &:nth-child(1) {
        &:before {
          content: '';
          width: 8px;
          height: 8px;
          background: #077CDC;
          display: inline-block;
          margin-right: 5px;
          vertical-align: middle;
        }
      }
    }
  }

  &.pielegend11 {
    p {
      &:nth-child(1) {
        &:before {
          content: '';
          width: 8px;
          height: 8px;
          background: #F78FFF;
          display: inline-block;
          margin-right: 5px;
        }
      }
    }
  }

  &.pielegend20 {
    p {
      &:nth-child(1) {
        &:before {
          content: '';
          width: 8px;
          height: 8px;
          background: #46C88C;
          display: inline-block;
          margin-right: 5px;
        }
      }
    }
  }

  &.pielegend21 {
    p {
      &:nth-child(1) {
        &:before {
          content: '';
          width: 8px;
          height: 8px;
          background: #FFB936;
          display: inline-block;
          margin-right: 5px;
        }
      }
    }
  }
}

.yzjzbox {
  width: 100%;
  margin: 0 auto;
  height: 190px;
  position: relative;

  p {
    text-align: center;
  }

  .yzjzcircle {
    width: 118px;
    height: 118px;
    background: url(../assets/img/page/piebg.svg) no-repeat center /118px 118px;
    position: absolute;
    left: 39px;
    top: 30px;
    animation: rotate1 3s linear infinite forwards;
  }

  .yzjzcircle1 {
    width: 80px;
    height: 80px;
    background: url(../assets/img/page/piebg.svg) no-repeat center /80px 80px;
    position: absolute;
    left: 27px;
    top: 25px;
    animation: rotate1 3s linear infinite forwards;
  }

  .yzjzcircle2 {
    width: 64px;
    height: 64px;
    background: url(../assets/img/page/piebg.svg) no-repeat center /64px 64px;
    position: absolute;
    left: 20px;
    top: 14px;
    animation: rotate1 3s linear infinite forwards;
  }
}

.flexlist {
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.normaltxt {
  font-size: 14px;
  color: #FFFFFF;
  letter-spacing: 0.84px;

  span {
    font-size: 16px;
    letter-spacing: 0.96px;
    font-weight: bold;
    padding: 0 10px;

    &.keyyellow {
      color: #FFB936;
    }

    &.keygreen {
      color: #46C88C;
      font-size: 24px;
    }

    &.keyyellow2 {
      color: #FFB936;
      font-size: 24px;
    }

    &.keyarrow {
      background: url("../assets/img/page/dotinfo.svg") no-repeat right center;
    }

    &.lightblue2 {
      color: #53E2FF;
      font-size: 24px;
    }

    &.up {
      background: url("../assets/img/page/dotup.svg") no-repeat left center;
      padding-left: 20px;
    }

    &.keyblue {
      color: #53E2FF;
    }
  }
}

.xuexiaolistbox {
  flex: 1;
  height: 32px;
  line-height: 32px;
  background: #0D2246;
  border: 1px solid rgba(1, 66, 120, 1);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 5px;
  cursor: pointer;

  &.active {
    border: 1px solid rgba(83, 226, 255, 1);
  }

  p {
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0.96px;
  }
}

.sortbox {
  width: 80%;
  margin: 0 auto;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #fff;

  p {
    cursor: pointer;

    &:before {
      content: '';
      width: 16px;
      height: 16px;
      background: #0D2246;
      border: 1px solid rgba(7, 124, 220, 0.56);
      border-radius: 2px;
      display: inline-block;
      vertical-align: middle;
      margin-right: 5px;
    }

    &.active:before {
      content: '✔';
      width: 16px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      color: #53E2FF;
      background: #0D2246;
      border: 1px solid rgba(83, 226, 255, 1);
      border-radius: 2px;
      display: inline-block;
      vertical-align: middle;
      margin-right: 5px;
    }
  }
}

.flexbetween {
  display: flex;
  justify-content: space-between;
}

.flexbox {
  display: flex;
  align-items: center;
}

.flexwrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.wrap-table {
  width: 100%;
  border-spacing: 0;
}

.wrap-table table {
  width: 100%;
  table-layout: fixed;
}

.wrap-table.head tr th {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  background: rgba(7, 124, 220, .24);
}

.wrap-table.body tr {
  td {
    font-size: 14px;
    padding: 8px 2px;
    text-align: center;
    letter-spacing: 0.84px;
    color: rgba(255, 255, 255, .72);
    background: rgba(7, 124, 220, .12);

    .progressbox1 {
      width: 180px;
      height: 12px;
      background: rgba(7, 124, 220, .12);
      position: relative;
      margin-right: 10px;
      margin-top: 5px;

      .progresscurbox {
        height: 4px;
        position: absolute;
        left: 4px;
        top: 4px;
        background: rgba(4, 193, 255, 1);

        &.progress0 {
          background: #FFB936;
        }
      }
    }

    p {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &.sortN0 {
        color: #FFB936;
        display: flex;
        justify-content: center;
        align-items: center;

        &:before {
          content: 'NO.';
          display: inline-block;
          vertical-align: middle;
        }
      }

      &.yellowkey {
        color: #FFB936;
      }
    }
  }

  &:nth-child(odd) {
    td {
      background: rgba(7, 124, 220, .04);
    }
  }

}

.wrap-table.body tr td.keyblue {
  font-size: 14px;
  color: #05D7FF;
  font-weight: 600;
}

@keyframes rotate1 {
  0% {
    transform: rotate(0) scale(1);
  }
  100% {
    transform: rotate(-360deg) scale(1);
  }
}

/*下拉框*/
/deep/ .el-input {
  font-size: 16px;
  color: #FFFFFF;
}

/deep/ .el-input__inner {
  background: #0D2246;
  border: 1px solid rgba(7, 124, 220, 1);
  border-radius: 4px;
  color: #53E2FF;
  font-size: 16px;

  &::-webkit-input-placeholder {
    color: #53E2FF;
  }
}

/deep/ .el-select-dropdown__item {
  color: #fff;
}

/deep/ .el-select:hover .el-input__inner {
  border-color: #6ABEFF
}

/deep/ .el-select-dropdown {
  background: rgba(3, 32, 64, 0.80);
  border: 1px solid rgba(61, 82, 103, 1);
  border-radius: 8px;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
}

/deep/ .el-popper .popper__arrow::after {
  border-width: 0;
}

/deep/ .el-popper[x-placement^=bottom] .popper__arrow {
  border-bottom-color: transparent;
}

/deep/ .el-select-dropdown__item.selected {
  background: rgba(106, 190, 255, 0.16);
  color: #6ABEFF;
  font-weight: normal;
}

/deep/ .el-select-dropdown__item.hover, /deep/ .el-select-dropdown__item:hover {
  background: rgba(106, 190, 255, 0.16);
}

/deep/ .el-radio {
  font-size: 16px;
  color: #53E2FF;
  letter-spacing: 0.96px;
}
</style>
